<template>
  <div>
    <Drawer title="用户角色" v-model="userRoleDrawerFlag" width="1020" @on-close="closeDrawer" :scrollable="true">
      <RoleMainMultiple ref="roleMainMultipleShow" @closeDrawer="closeDrawer" @showAddModal="showAddModal" @refresh="refresh"/>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="closeDrawer">取消</Button>
        <Button type="primary" @click="closeDrawer">关闭</Button>
      </div>
    </Drawer>
    <Modal v-model="roleAddModal" title="新增" :mask-closable="true" width="1020">
      <RoleMainMultiple ref="roleMainMultipleAdd" optType="add" @closeAddModal="closeAddModal" @refresh="refresh"/>
       <div slot="footer">
            <Button type="text" size="large" @click="closeAddModal">取消</Button>
            <Button type="primary" size="large" @click="updateRole">确认选择</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import RoleMainMultiple from '@/view/role/RoleMainMultiple.vue'
import { getUserRoleByUserId } from '@/api/role'
import * as utils from '@/api/utils-v2'
import * as ResponseStatus from '@/api/response-status'
export default {
  name: 'UserRoleAssignDrawer',
  components: {
    RoleMainMultiple
  },
  data() {
    return {
      userRoleDrawerFlag: false,
      roleAddModal: false
    }
  },
  computed: {},
  mounted() {},
  methods: {
    initData(userId) {
      getUserRoleByUserId(userId).then(res => {
          const data = res.data
          if (data.code !== ResponseStatus.OK) {
            this.$Message.error(data.message)
            return
          }
          let roleMainMultipleAdd = this.$refs.roleMainMultipleAdd
          roleMainMultipleAdd.selectedData = data.data.rows
          roleMainMultipleAdd.selectedDataIdProp = 'roleId'
          roleMainMultipleAdd.extraData.userId = userId
          let roleIds = [0]
          data.data.rows.forEach(row => {
            roleIds.push(row.roleId)
          })
          let roleMainMultipleShow = this.$refs.roleMainMultipleShow
          roleMainMultipleShow.$refs.searchModal.searchForm.ids = roleIds
           roleMainMultipleShow.extraData.userId = userId
          roleMainMultipleShow.searchTable(false, true)
        }).catch(err => {
          this.$Message.error(err)
        })
    },
    showAddModal() {
      this.roleAddModal = true
      let roleMainMultipleAdd = this.$refs.roleMainMultipleAdd
      roleMainMultipleAdd.searchTable(false, true)
    },
    closeDrawer() {
      this.userRoleDrawerFlag = false
    },
    closeAddModal() {
      this.roleAddModal = false
    },
    updateRole() {
      this.$refs.roleMainMultipleAdd.confirmSelection()
    },
    refresh(userId) {
      this.initData(userId)
    }
  }
}
</script>

<style>
.demo-drawer-footer {
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
